<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 主体 -->
    <el-card class="box-card">
      <el-row>
        <el-col :span="8">
          <el-button type="primary" @click="dialogFormVisible = true"
            >添加角色</el-button
          >
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table :data="table" border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div>
              <div v-if="scope.row.children.length > 0">
                <el-row class="row_kk" v-for="item in scope.row.children" :key="item.id">
                  <el-col :span="6">
                    <el-tag
                      @close="dellist(scope.row, scope.row.id, item.id)"
                      closable
                      type="primary"
                      >{{ item.authName }}</el-tag
                    >
                  </el-col>
                  <el-col :span="18">
                    <el-row v-for="item2 in item.children" :key="item2.id">
                      <el-col :span="6">
                        <el-tag
                          @close="dellist(scope.row, scope.row.id, item2.id)"
                          closable
                          type="success"
                          >{{ item2.authName }}</el-tag
                        >
                      </el-col>
                      <el-col :span="18">
                        <el-tag
                          @close="dellist(scope.row, scope.row.id, item3.id)"
                          type="warning"
                          closable
                          v-for="item3 in item2.children"
                          :key="item3.id"
                          >{{ item3.authName }}</el-tag
                        >
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
              <div v-else>暂无权限</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称"> </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="bj(scope.row.id)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="del(scope.row.id)"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-star-off"
              @click="fenpei(scope.row)"
              >分配权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加角色的模态框 -->
    <el-dialog title="添加角色" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item
          label="角色名称"
          prop="roleName"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="角色描述"
          prop="roleDesc"
          :label-width="formLabelWidth"
        >
          <el-input v-model="form.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="login">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改角色的模态框 -->
    <el-dialog title="添加角色" :visible.sync="bjdialogFormVisible">
      <el-form :model="bjform" :rules="rules" ref="ruleForm">
        <el-form-item
          label="角色名称"
          prop="roleName"
          :label-width="formLabelWidth"
        >
          <el-input v-model="bjform.roleName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="角色描述"
          prop="roleDesc"
          :label-width="formLabelWidth"
        >
          <el-input v-model="bjform.roleDesc" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bjdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="bjlogin">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分配权限的模态框 -->
    <el-dialog
      title="分配权限"
      :visible.sync="fpdialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-tree
        ref="rolestree"
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        :default-checked-keys="checkall"
        :props="defaultProps"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="fpdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="treeList">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  rolename,
  rolenameLIST,
  rolescha,
  rolesdel,
  rolesxiu,
  rightslist,
  rolesq,
  roleshanchu
} from '../http/api'
export default {
  data() {
    return {
      table: [], // 角色列表的总数据
      data: [], // 树形控件的数据
      defaultProps: {
        // 树形控件中的内容展示
        children: 'children',
        label: 'authName'
      },
      checkall: [], // 用户选中的状态,默认id选中的组成的数组
      jiaoseid: 0, // 当前用户角色id
      form: {
        roleName: '',
        roleDesc: ''
      },
      dialogFormVisible: false,
      // 验证规则
      rules: {
        roleName: [
          { required: true, message: '请输入角色名称', trigger: 'blur' }
        ],
        roleDesc: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ]
      },
      formLabelWidth: '120px',
      bjform: {},
      bjdialogFormVisible: false, // 编辑的模态框
      fpdialogVisible: false // 分配权限的模态框
    }
  },
  created() {
    this.getlist()
  },
  methods: {
    //   渲染角色列表
    async getlist() {
      const res = await rolename(this.form)
      console.log(res)
      this.table = res
    },
    // 添加角色
    async login() {
      await rolenameLIST(this.form)
      this.getlist()
      this.form = ''
      this.dialogFormVisible = false
    },
    // 删除角色
    async del(id) {
      await rolesdel(id)
      this.getlist()
    },
    // 查询角色
    async bj(id) {
      const res = await rolescha(id)
      this.bjform = res
      this.bjdialogFormVisible = true
    },
    // 修改角色
    async bjlogin() {
      await rolesxiu(this.bjform.roleId, this.bjform)
      this.getlist()
      this.bjdialogFormVisible = false
    },
    // 点击分配按钮显示弹框
    async fenpei(row) {
      const res = await rightslist('tree')
      this.data = res
      this.jiaoseid = row.id
      // 递归获取当前角色所拥有的权限数组
      this.getchecked(row, this.checkall)
      // 显示
      this.fpdialogVisible = true
    },
    // 递归的方法
    getchecked(row, checkall) {
      if (!row.children) {
        return checkall.push(row.id)
      }

      row.children.forEach((item) => {
        this.getchecked(item, checkall)
      })
    },
    // 点击x号关闭的事件
    handleClose() {
      this.checkall = []
      this.fpdialogVisible = false
    },
    // 分配权限开始,拿到全选和半选
    async treeList() {
      // 全选id数组
      const qx = this.$refs.rolestree.getCheckedKeys()
      // 半选id数组
      const bx = this.$refs.rolestree.getHalfCheckedKeys()
      console.log('全选:', qx)
      console.log('半选:', bx)
      // 将2个数组和平
      const hb = [...qx, ...bx]
      // 并转换为字符串
      const zh = hb.join(',')
      // 请求接口
      await rolesq(this.jiaoseid, zh)
      this.getlist()
      this.fpdialogVisible = false
    },
    // 删除tag标签
    async dellist(row, roleid, rightid) {
      const res = await roleshanchu(roleid, rightid)
      row.children = res
    }
  }
}
</script>

<style lang="less" scoped>
.el-table {
  margin-top: 16px;
}
.row_kk{
  margin: 10px;
  border: 1px solid #f5f5f5;
}
.el-tag{
  margin: 10px 10px;
}
</style>
